<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue指令</title>
		
		<style>
			/* 为属性设置隐藏 */
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 1.指令练习 v-cloak
				当前浏览器解析js完成前，用户看到的数据是{{msg}}，
				直到浏览器加载完成全部js，则{{msg}}替换为具体的数据
			-->
			测试1：v-cloak属性
			<h1 v-cloak>{{msg}}</h1>
			<hr />
			<!-- 2.v-text将上述v-cloak优化了 -->
			测试2：v-text属性
			<h1 v-text="msg"></h1>
			<hr />
			测试3：v-html属性
			<!-- 3.v-html 动态的展现html标签 -->
			<span v-html="html"></span>
			<!-- 4.需求：只想展现{{msg}}不与要vue解析
				语法：v-pre vue不解析该标签直接跳过
			 -->
			 测试：v-pre
			 
			<span v-pre>{{msg}}</span>
			<hr/>
			<!-- 5.需求：元素只解析一次 之后用户随意修改，数据不变 -->
			v-once:
			{{one}}<br />
			<span v-once>{{one}}</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			//一般工作中字符串写法 提倡使用单引号
			const app = new Vue({
				el: "#app",
				data:{
					msg:"测试数据",
					html:'<h3>测试html语法</h3>',
					one: '数据解析1次'
				}
			})
		</script>
	</body>
</html>
